<template>
  <el-dialog
    title="编辑洗车机"
    :visible.sync="dialogVisible"
    width="80%"
    center
    :before-close="handleClose"
  >
    <el-form
      :model="info"
      :rules="rules"
      ref="info"
      label-width="100px"
      class="demo-info"
    >
      <div class="flex">
        <el-form-item label="所属商户号:" prop="merchantNo">
          <el-select
            v-model="info.merchantNo"
            placeholder="请选择所属商户号"
            @change="merchantSelected"
          >
            <el-option
              v-for="item in merchantNoList"
              :key="item.id"
              :label="item.merchant_Num"
              :value="item.merchant_Num"
            >
              <span>{{ item.merchant_Num }}</span>
            </el-option>
          </el-select>
          <div class="tips color-red">
            <i type="primary" class="el-icon-warning-outline"></i>
            请务必认真审阅商户号对应所属关系
          </div>
        </el-form-item>
        <el-form-item label="所属关系:" v-if="merchantList.length">
          <p v-if="merchantList.length === 1">
            {{ merchantList[0].store_Name }}
          </p>
          <div class="name-list" v-else>
            <div v-for="(item, index) in merchantList" :key="index">
              <div class="item">
                <div class="item-left">{{ item.merchant_TypeName }}：</div>
                <div>{{ item.store_Name }}</div>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>

      <el-form-item label="所属洗车站:" prop="stationId">
        <el-select v-model="info.stationId" placeholder="请选择所属洗车站">
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.station_Name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型:" prop="type">
        <el-select v-model="info.type" placeholder="请选择设备类型">
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备信息:">
        <div class="flex flex-wrap-w">
          <div class="pr-20 flex mb-20">
            <el-form-item prop="factor" label="厂家：">
              <el-select :value="info.factor" placeholder="请选择厂家">
                <el-option
                  v-for="item in factorList"
                  :key="item.id"
                  :label="item.suppliers_Name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="pr-20 flex mb-20">
            <el-form-item prop="series" label="系列：">
              <el-input
                v-model="info.series"
                placeholder="请填写系列"
                maxlength="10"
                clearable
              ></el-input>
            </el-form-item>
          </div>
          <div class="pr-20 flex mb-20">
            <el-form-item prop="model" label="型号：">
              <el-input
                v-model="info.model"
                placeholder="请填写型号"
                maxlength="10"
                clearable
              ></el-input>
            </el-form-item>
          </div>
          <div class="pr-20 flex mb-20">
            <el-form-item prop="hardwareVersion" label="版本：">
              <el-input
                v-model="info.hardwareVersion"
                placeholder="请填写版本"
                maxlength="10"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="质保：" prop="qualityAssurance">
          <el-select v-model="info.qualityAssurance" placeholder="请选择质保">
            <el-option
              v-for="item in qualityAssuranceList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form-item>

      <el-form-item label="设备编号:" prop="equipmentNo">
        <div>{{ info.equipmentNo }}</div>
      </el-form-item>
      <el-form-item label="物联网卡号:" prop="lotNo">
        <el-input type="text" v-model="info.lotNo"></el-input>
      </el-form-item>
      <el-form-item label="软件版本号:" prop="softwareVersion">
        <el-input type="text" v-model="info.softwareVersion"></el-input>
      </el-form-item>
      <el-form-item label="设备价格:" prop="deviceCost">
        <div>{{ info.deviceCost }}元</div>
      </el-form-item>
      <el-form-item label="设备启动码">
        <template>
          <vue-qr
            :text="qrtext"
            :margin="0"
            colorDark="#333"
            colorLight="#fff"
            :size="100"
          ></vue-qr>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('info')">保存修改</el-button>
      </el-form-item>
      <div class="form-footer">
        创建时间：<span class="pr-20">{{ addTime }}</span>
        <span>{{ info.creatorName }}</span>
      </div>
      <div>
        更新时间：<span class="pr-20">{{ updateTime }}</span>
        <span>{{ info.modifierName }}</span>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
import dayjs from "dayjs";
import vueQr from "vue-qr";

export default {
  name: "editEquipment",
  data() {
    return {
      info: {
        merchantNo: "",
        stationId: "",
        type: "",
        factor: "",
        series: "",
        model: "",
        qualityAssurance: "",
        equipmentNo: "", //设备编号，
        deviceCost: "",
        lotNo: "",
        hardwareVersion: "",
        softwareVersion: ""
      },
      addTime: "",
      updateTime: "",
      qrtext: "",
      rules: {
        merchantNo: [{ required: true, message: "请选择所属商户号" }],
        stationId: [{ required: true, message: "请选择所属洗车站" }],
        type: [{ required: true, message: "请选择设备类型" }],
        factor: [{ required: true, message: "请选择设备厂家" }],
        qualityAssurance: [{ required: true, message: "请选择质保" }],
        lotNo: [{ required: true, message: "请填写物联网卡号" }],
        deviceCost: [{ required: true, message: "请填写设备价格" }],
        equipmentNo: { required: true, message: "设备编号不能为空" }
      },
      merchantNoList: [],
      stationList: [],
      factorList: [],
      typeList: [
        { id: "0", name: "自助洗车机" },
        { id: "1", name: "自动洗车机" }
      ],
      qualityAssuranceList: [
        { id: 0, name: "一年" },
        { id: 1, name: "两年" },
        { id: 2, name: "三年" }
      ],
      merchantList: [] //商户号所属关系列表
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    params: {
      type: String,
      default: ""
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getMachineInfo();
      }
    }
  },

  mounted() {
    this.getSuppliersList();
    this.getStoreMerchant();
  },

  methods: {
    // 获取洗车机详情
    getMachineInfo() {
      this.$api.equipments
        .getMachineInfo_2({
          id: this.params
        })
        .then(res => {
          this.info = {
            stationId: res.data.self_Service_Car_Wash_Station_Id,
            type: res.data.machineTypeDesc === "全自动" ? "1" : "0",
            factor: res.data.self_Service_Car_Wash_Machine_Suppliers_Id,
            series: res.data.series_Name,
            model: res.data.type_Name,
            qualityAssurance: res.data.warranty,
            equipmentNo: res.data.wash_Machine_Id, //设备编号，
            creatorName: res.data.creatorName,
            modifierName: res.data.modifierName,
            deviceCost: res.data.device_Cost,
            lotNo: res.data.lotNo,
            softwareVersion: res.data.softwareVersion,
            hardwareVersion: res.data.hardwareVersion
          };
          if (res.data.merchantList) {
            this.info.merchantNo = res.data.merchantList[0].merchant_Num;
            this.merchantList = res.data.merchantList;
            this.getStationList(res.data.merchantList[0].merchant_Num);
          }

          this.addTime = dayjs(res.data.addTime).format("YYYY-MM-DD HH:mm:ss");
          this.updateTime = dayjs(res.data.updateTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.qrtext =
            "https://lineapi.yzsheng.com/pages_commodity?id=" +
            res.data.wash_Machine_Id +
            "&type=existingOrder&machineType=" +
            this.info.type;
          console.log(this.info);
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取自助洗车机供应商列表
    getSuppliersList() {
      this.$api.equipments
        .getMachineSuppliersList()
        .then(res => {
          this.factorList = res.data;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("网络异常，请刷新重试");
        });
    },

    // 商户号列表
    getStoreMerchant() {
      this.$api.equipments
        .getStoreMerchant()
        .then(res => {
          this.merchantNoList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 选择商户
    merchantSelected(e) {
      this.info.stationId = "";
      this.getStationList(e);
      this.getMerchantInfo(e);
    },

    // 获取商户号所属信息
    getMerchantInfo(id) {
      this.$api.equipments
        .getMerchantInfo({ merchant_num: id })
        .then(res => {
          this.merchantList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取洗车站列表
    getStationList(id) {
      this.$api.equipments
        .getStation({ merchant_Num: id })
        .then(res => {
          this.stationList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 提交
    submit(formName) {
      console.log(this.info);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.equipments
            .updateMachine({
              id: this.params,
              typeName: this.info.model,
              seriesName: this.info.series,
              self_Service_Car_Wash_Machine_Suppliers_Id: this.info.factor,
              self_Service_Car_Wash_Station_Id: this.info.stationId,
              warranty: this.info.qualityAssurance,
              wash_Machine_Id: this.info.equipmentNo,
              device_Cost: this.info.deviceCost,
              cleanMachineType: this.info.type,
              lotNo: this.info.lotNo,
              softwareVersion: this.info.softwareVersion,
              hardwareVersion: this.info.hardwareVersion
            })
            .then(res => {
              this.$refs[formName].resetFields();
              this.merchantList = [];
              this.$emit("confirmEdit", res.data);
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleClose() {
      this.merchantList = [];
      this.$refs["info"].resetFields();
      this.$emit("closeEdit");
    }
  },

  components: {
    vueQr
  }
};
</script>
<style lang="scss" scoped>
.pr-20 {
  padding-right: 20px;
}
.form-footer {
  padding: 20px 0 10px;
}
.name-list {
  border: 1px solid #ccc;
  padding: 0 20px;
}
.item {
  display: flex;
}
.item-left {
  text-align: right;
  padding-right: 10px;
}
</style>
